<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small" v-if="editId"><i class="el-icon-back"></i>返回列表
      </el-button>
      <el-row class="warp">
        <el-col :span="24" class="warp-main">
          <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="140px">
            <el-form-item label="通知标题:" prop="title">
              <el-input v-model="infoForm.title" placeholder="填写通知标题"></el-input>
            </el-form-item>
            <el-form-item label="要求送达时间:">
              <el-date-picker type="date"
                              placeholder="要求送达时间"
                              v-model="infoForm.time"
                              :picker-options="pickerOptions1"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="通知范围:">
              <el-radio-group v-model="infoForm.type" @change="radiochange">
                <el-radio :label="0">全校</el-radio>
                <el-radio :label="1">特定年段</el-radio>
                <el-radio :label="2">特定班级</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="请选择年段:" v-if="infoForm.type==1">
              <el-select v-model="value1" multiple placeholder="请选择" style="width: 100%;">
                <el-option
                    v-for="item in sectionList"
                    :key="item.id"
                    :label="item.section_name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请选择通知班级:" v-if="infoForm.type==2">
              <sectionInput @changeSection="changeSection" :sectionId.sync="infoForm.section_id"></sectionInput>
              <classInput @changeClass="changeClass" :sectionId.sync="infoForm.section_id"
                          :classId.sync="infoForm.class_id"></classInput>
            </el-form-item>
            <el-form-item label="是否选择特定学生:" v-if="infoForm.class_id">
              <el-radio-group @change="staduentchange" v-model="studentRadio">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择特定学生:" v-if="studentRadio==1">
              <el-button type="primary" @click="chooseStudent" class="mb-10" size="small">选择特定学生</el-button>
              <div>
                <el-tag
                    :key="tag"
                    v-for="(tag,index) in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index)"
                    class="mr-10"
                >{{ tag }}
                </el-tag>
              </div>
            </el-form-item>
            <el-form-item label="通知内容:" prop="title">
              <quill-editor v-model="infoForm.body"
                            ref="myQuillEditor"
                            class="editer"
                            :options="editorOption" @ready="onEditorReady($event)" placeholder="填写通知内容">
              </quill-editor>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存并提交</el-button>
              <el-button @click="backlist">返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <studentMultiple :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                     :usersectionId="infoForm.section_id" :dynamicTagsArray="dynamicTagsArray"></studentMultiple>
  </div>
</template>

<script>
import {yeartime} from '@/assets/js/common'
import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import quillConfig from '@/assets/js/quill-config.js'
import studentMultiple from '@/components/dialog/studentMultiple.vue'
import {pagination, tableoption} from '@/utils/util.js'
import classInput from '@/components/template/classInput.vue'
import sectionInput from '@/components/template/sectionInput.vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import api from '@/utils/api.js'

export default {
  components: {
    // 使用编辑器
    quillEditor,
    classInput,
    sectionInput,
    studentMultiple
  },
  data () {
    return {
      // 限制时间选择
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      infoForm: {
        title: '',
        body: '',
        type: '0',
        class_id: '',
        section_id: '',
        time: yeartime(new Date()),
        student_id: 0,
        id: this.$route.query.editId
      },
      editorOption: quillConfig,
      // 表单验证
      rules: {
        title: [
          {required: true, message: '填写通知标题', trigger: 'blur'}
        ],
        body: [
          {required: true, message: '填写通知内容', trigger: 'blur'}
        ]
      },
      editId: this.$route.query.editId,
      studentRadio: 0,
      value1: [],
      section_id: '',
      sectionList: [],
      oldClass: {}, // 未处理的班级
      oldsection: {}, // 未处理的年段
      editClass_id: [],
      editsection_id: [],
      studentVisible: false,
      dynamicTags: [],
      dynamicTagsId: [],
      dynamicTagsArray: {},
      editBody: null
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  created () {
  },
  mounted () {
    // 初始化
    console.log('初始化', this.editId)
    this.Inint()
  },
  methods: {
    Inint () {
      this.$fetch(api.admin_notice_detail, {id: this.editId}).then((response) => {
        if (response.code === 0) {
          this.infoForm.title = response.vo.title
          this.infoForm.body = response.vo.body
          this.infoForm.type = response.vo.type
          this.infoForm.class_id = response.vo.class_id
          // 0全校 1特定年段 2特定班级
          if (response.vo.type === 1) {
            this.editsection_id = response.vo.section_id
          } else if (response.vo.type === 2) {
            this.editClass_id = response.vo.class_id
          }
          this.editBody = response.vo
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    radiochange () {
      this.infoForm.section_id = ''
      this.section_id = ''
      this.infoForm.class_id = ''
      this.value1 = []
      if (Number(this.infoForm.type) === 1) {
        console.log('请求年段1')
        this.sectionListFn()
      }
    },
    sectionListFn () {
      this.$post(api.admin_section_index, {
        p: this.page.pageindex
      }).then((response) => {
        if (response.code === 0) {
          this.sectionList = response.list.data
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onEditorReady (editor) {
    },
    backlist () {
      this.$router.go(-1)
    },
    onSubmit () {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      // if (!this.infoForm.title) {
      //   this.$message({
      //     message: '请填写通知标题',
      //     type: 'error'
      //   })
      //   return
      // }
      // studentRadio 0否1是

      // if (!this.infoForm.body) {
      //   this.$message({
      //     message: '请填写通知内容',
      //     type: 'error'
      //   })
      //   return
      // }

      this.$refs['infoForm'].validate((valid) => {
        if (valid) {
          if (this.studentRadio === 1 && this.infoForm.student_id === 0) {
            this.$message({
              message: '请选择特定学生',
              type: 'error'
            })
            return
          }
          if (Number(this.infoForm.type) === 1) {
            this.infoForm.section_id = this.value1.join(',')
          }
          this.$post(api.admin_notice_detail, this.infoForm).then(res => {
            if (res.code === 0) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    changeSection (option) {
      this.infoForm.class_id = ''
      this.infoForm.section_id = option
    },
    changeClass (option) {
      this.infoForm.class_id = option
    },
    staduentchange () {
      if (this.studentRadio === 0) {
        this.infoForm.student_id = 0
      }
    },
    chooseStudent () {
      console.log('idname:', this.infoForm.section_id, this.infoForm.class_id)
      this.studentVisible = true
    },
    studentFn (option) {
      console.log('接受到的数据：', option)
      for (let i in option) {
        this.dynamicTags.push(option[i].name)
        this.dynamicTagsId.push(option[i].id)
        this.dynamicTagsArray = option
      }
      this.infoForm.student_id = this.dynamicTagsId.join(',')
    },
    handleClose (index) {
      this.dynamicTags.splice(index, 1)
      delete this.dynamicTagsArray[this.dynamicTagsId[index]] // 去除选中的人
      this.dynamicTagsId.splice(index, 1)
      this.infoForm.student_id = this.dynamicTagsId.join(',')
    }
  }
}
</script>
